<template>
    <!-- 使用el-card创建一个卡片组件，通过shadow使得当鼠标悬停时显示阴影效果 -->
    <el-card shadow="hover" style="width: 250px;height: 380px;border-radius: 15px;" @click="goTakeout">
        <!-- 使用行和列布局来组织内容 -->
        <el-row align="middle" justify="center">
            <!-- 第一列用于展示图片 -->
            <el-col :span="24">
                <!-- 图片组件适应容器大小，占满整个容器 -->
                <el-image :src="url" style="width: 100%;height: 200px;" fit="contain" />
            </el-col>
            <!-- 第二列用于展示外卖名称 -->
            <el-col :span="24" align="start">
                <!-- 通过el-text实现对文本展示，只允许单行显示 -->
                <el-text style="font-size: larger;" line-clamp="1">{{ takeout?.takeout_name }}</el-text>
            </el-col>
            <!-- 第三列用于展示外卖介绍 -->
            <el-col :span="24" align="start">
                <!-- 通过el-text实现对文本展示，最多允许显示三行 -->
                <el-text style="color: gray;height: 60px;" line-clamp="3">{{ takeout?.introduce }}</el-text>
            </el-col>
            <!-- 第四列用于展示外卖价格 -->
            <el-col :span="24" align="end">
                <!-- 通过el-text实现对文本展示，文字颜色设置红色，只允许单行显示 -->
                <el-text style="color: red;font-size: large;" line-clamp="1">¥ {{ takeout?.price }}</el-text>
            </el-col>
            <!-- 第五列用于展示浏览量和评分 -->
            <el-col :span="24" style="margin-top: 5%;height: max-content;">
                <!-- 通过嵌套行和列实现整体布局 -->
                <el-row style="width: 100%;">
                    <!-- 第一列用于展示浏览量和评分 -->
                    <el-col :span="24" align="start">
                        <!-- 展示浏览量 -->
                        <el-text>浏览量：{{ takeout?.flow }}</el-text>
                        <!-- 展示评分 -->
                        <el-text style="margin-left: 10%;">评分：{{ takeout?.mark }}</el-text>
                        <!-- 展示评论数量 -->
                        <el-text style="margin-left: 10%;">评论：{{ takeout?.remark_count }}</el-text>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-card>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import { TakeoutModel } from '../assets/models/Takeout';

// 定义路由实例
const router = useRouter();
// 定义一个响应式变量来存储图片URL
const url = ref<string>();
onMounted(() => {
    // 判断外卖对象是否存在且有头像路径，若存在则设置图片URL
    if (prop.takeout?.takeout_portrait) {
        url.value = `/api/${prop.takeout.takeout_portrait}`
    }
})

// 定义属性接口，接受外卖对象
const prop = defineProps({
    takeout: {
        type: TakeoutModel
    }
});

// 点击外卖商品卡片时跳转到对应的外卖详情页
const goTakeout = () => {
    router.push({
        path: '/takeout',
        query: {
            // 通过传递外卖商品id实现对指定商品的显示
            id: prop.takeout?.id
        }
    })
}
</script>